<template>
  <div class="box4" ref="map">
    我是地图组件
  </div>
</template>

<script lang="ts" setup>
import {ref,onMounted} from 'vue'
import * as echarts from 'echarts'
// 引入 中国地图的json数据
import chinaJSON from './china.json'
// 获取DOM元素
let map = ref()
// 注册中国地图
echarts.registerMap('china',chinaJSON)
onMounted(()=>{
  let mychart = echarts.init(map.value)
  // 设置配置项
  mychart.setOption({
    // 地图组件
    geo:{
      map:'china',//中国地图
      roam:true, //鼠标缩放的效果
      // 地图的位置测试
      top:200,
      // 地图上文字的设置
      label:{
        show:true,//文字显示
        color:'white',
        fontSize:14
      },
      zoom:1.3,
      itemStyle:{
        // 每一个多边形的样式
        color:{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: '#02327E' // 0% 处的颜色
          }, {
              offset: 1, color: '#022450' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        opacity:0.8, 
        borderColor:'#14538E',
        borderWidth:2
      },
      // 地图高亮效果
      emphasis:{
        itemStyle:{
          color:'pink'
        },
        label:{
          fontSize:20
        }
      }
    },
    // 布局位置
    grid:{
      top:0,
      left:0,
      right:0,
      bottom:0
    },
    series:[
      {
        type:'lines',//航线的系列
        data:[
          {
              coords: [
                  [116.405285,39.904989],  // 起点
                  [126.642464,45.756967]   // 终点
              ],
              // 统一的样式设置
              lineStyle: {
                color:'green',
                width:3,
                curveness:0.3
              }, 
          },
          {
              coords: [
                  [121.472644,31.231706],  // 起点
                  [ 112.982279,28.19409]   // 终点
              ],
              // 统一的样式设置
              lineStyle: {
                color:'orange',
                width:3,
                curveness:0.3
              }, 
          }
        ],
        // 开启动画特效
        effect:{
              show:true,
              symbol:'path://M599.06048 831.309824l12.106752-193.404928 372.860928 184.430592L984.02816 710.206464 617.906176 367.33952 617.906176 151.638016c0-56.974336-46.188544-143.064064-103.158784-143.064064-56.974336 0-103.158784 86.089728-103.158784 143.064064L411.588608 367.33952 45.461504 710.206464l0 112.129024 366.660608-184.430592 14.999552 209.27488c0 5.05344 0.594944 9.892864 1.124352 14.749696l-66.591744 60.348416 0 66.587648 153.986048-50.879488 2.43712-0.80896 147.439616 51.688448 0-66.587648-68.758528-62.253056L599.06048 831.309824z',
              symbolSize:10,
              color:'white'
            }
      }
    ]
  }) 
})
</script>

<style scoped>

</style>